<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 01 Page</h1>
    <fieldset>
        <legend>Ajax 请求</legend>
        <button onclick="doAjaxGet()">Ajax Get Request</button>
        <span id="resultId">Loading data ...</span>
    </fieldset>
</div>
<script>
    function doAjaxGet(){
        //1.创建XHR对象
        var xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function (){
            //0表示还未执行open方法
            //1表示已执行open方法但还未执行send方法
            //2表示已执行send方法
            //3表示客户端正在接收服务端响应的数据
            //4表示客户端已经完成响应数据的接收
            if(xhr.readyState==4&&xhr.status==200){
                var result=xhr.responseText; //获取服务端响应的文本数据
                document.getElementById("resultId").innerHTML=result;
            }
        }
        //3.建立与服务器的链接
        xhr.open("GET","http://localhost/doAjaxGet",true); //true表示异步请求
        //4，发送请求
        xhr.send(null);
        console.log("do other ...")
    }
</script>
</body>
</html>